<template>
    <div class="default-main ba-table-box">

     

        <!-- 表格顶部菜单 -->
        <!-- 自定义按钮请使用插槽，甚至公共搜索也可以使用具名插槽渲染，参见文档 -->
        <div class="table-header ba-scroll-style">
        
            <div class="table-search">
                <el-input
                    v-model="state.keyword"
                    class="quick-search"
                    clearable 
                    style="width: 220px;"
                    :placeholder="t('搜索')"
                    @input="getData(0)"
                />
                
            </div>
            
            <!-- <span class="btn ml-12 btn-success" v-blur type="primary">{{ t('添加') }}</span> -->
            <!-- <el-popconfirm
                :confirm-button-text="t('删除')"
                :cancel-button-text="t('取消')"
                confirmButtonType="danger"
                :title="t('Are you sure to delete the selected record?')"
            >
                <template #reference>
                    <div class="mlr-12 ml-12">
                        <span class="btn btn-danger ml-12" type="danger">{{ t('删除') }}</span>
                    </div>
                </template>
            </el-popconfirm> -->

            
            
        </div>

        <!-- 表格 -->
        <!-- 表格列有多种自定义渲染方式，比如自定义组件、具名插槽等，参见文档 -->
        <!-- 要使用 el-table 组件原有的属性，直接加在 Table 标签上即可 -->
        
        <el-table
            :data="state.data"
            row-key="id"
            lazy
            :load="load"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            header-row-class-name="table-header-row"
            @row-click="rowClick"
            >
            <el-table-column prop="name" :label="t('分类名称')" class-name="" />
            <!-- <el-table-column prop="address" :label="t('操作')" width="200" height="200" /> -->
            
            <el-table-column :label="t('操作')" width="200" align="center">
                <template #default="scope">
                    <div>
                        <span class="el-button el-button--primary btn btn-primary table-operate" @click="popForm(scope.row)">{{ t('编辑') }}</span>
                        <!-- <span class="el-button el-button--primary btn btn-danger table-operate ml-5">{{ t('删除') }}</span> -->
                        <el-popconfirm :title="t('确定要删除这条数据吗')" @confirm="del(scope.row)">
                            <template #reference>
                                <div class="el-button el-button--primary btn btn-danger table-operate ml-5">{{ t('删除') }}</div>
                            </template>
                        </el-popconfirm>
                    </div>
                    
                </template>
            </el-table-column>
        </el-table>
        

        <!-- 表单 -->
        <PopupForm v-model="state.popForm" v-if="state.popForm" :form="state.form" @close="close" @refresh="refresh" />


    </div>
</template>

<script setup lang="ts">
import { ref, provide, onMounted, reactive } from 'vue'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'

import { indexApi, delApi } from '/@/api/most/category/supplier_category'

// import baTableClass from '/@/utils/baTable'

defineOptions({
    name: 'most/category/supplier_category',
})

const { t } = useI18n()

const close = () => {
    state.popForm = false;
}


const state = reactive({
    data: [],
    keyword: '',
    popForm: false,
    form: {
        id: 0,
        name: '',
        pid: 0,
    }
});

const rowClick = (row: anyObj, column: anyObj, event) => {
    if(column.label != t('分类名称')) return;
    if (event.currentTarget.querySelector(".el-table__expand-icon")) {
        event.currentTarget.querySelector(".el-table__expand-icon").click();
    }
}


const popForm = (row: anyObj) => {
    state.popForm = true;
    state.form.id = row.id;
    state.form.name = row.name;
    state.form.pid = row.pid;
}



const getData = (pid:number) => {
    let data = { pid: pid, keyword: state.keyword }
    indexApi(data).then((e) => {
        state.data = e.data.list;
    })
}

const del = (row:anyObj) => {
    let data = { ids: [row.id] }
    delApi(data).then((e) => {
        refresh()
    })
}

const load = (row: anyObj, treeNode: unknown, resolve: (date: anyObj[]) => void) => {
    let data = { pid: row.id, keyword: state.keyword }
    indexApi(data).then((e) => {
        resolve(e.data.list);
    })
}

const refresh = () => {
    state.data = [];
    getData(0)
}


onMounted(() => {
    getData(0);
})
</script>

<style scoped lang="scss">

:deep(.el-image){
    // width: 60px;
    // height: 60px;
    width: unset;
    height: unset;
    // max-height: 100px;
    // max-width: 80px;
    // max-height: 80px;
}
:deep(td.business-name > div.cell) {
    min-height: 80px;
    display:flex;
    justify-content:center; 
    align-items:center;
}
.tian{
    cursor: pointer;
}
.tian:hover{
    color: #409EFF;
}

:deep(.el-image > img){
    // width: 60px;
    // height: 60px;
    width: unset;
    height: unset;
    // max-height: 100px;
    max-width: 80px;
    max-height: 80px;
}
:deep(.ba-data-table .btn){
    padding: 4px 14px;
}

:deep(.table-header) {
    position: relative;
    overflow-y: scroll;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    background-color: var(--ba-bg-color-overlay);
    border: 1px solid var(--ba-border-color);
    border-bottom: none;
    padding: 13px 15px;
    font-size: 14px;
}


:deep(.ba-data-table .margin-left-none:last-child){
    margin-bottom: 0px;
}
:deep(.table-operate-text){
    padding-left: 0;
}
:deep(.font-size-13){
    font-size: 13px;
}
:deep(.pay-type .el-radio){
    margin-right: 10px;
}
pre{
    font-family: 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','微软雅黑',Arial,sans-serif;
}
:deep(.ba-operate-dialog .el-dialog__body){
    // padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}
:deep(.quotation-scrollbar .el-scrollbar:first-child > .el-scrollbar__wrap){
    height: 100%;
}
:deep(.ml-0){
    margin-left: 0!important;
}
:deep(.mt-8){
    margin-top: 8px;
}
:deep(.ml--6){
    margin-left: -6px;
}
:deep(.ml-5){
    margin-left: 5px;
}
:deep(.mt-5){
    margin-top: 5px;
}
:deep(.ba-operate-dialog .el-dialog__body){
    // height: calc(90vh - 55px);
}
:deep(.el-table th.el-table__cell){
    background: rgb(245, 245, 246);
    border-color: rgb(234, 234, 234);
}
:deep(.el-table thead){
    color: #303133!important;
}
:deep(.el-table__row--level-1){
    background: #f4fdff;
}
:deep(.el-table__row--level-2){
    background: #f0fff0;
}
:deep(.el-table__row--level-3){
    background: #fffaf2;
}
</style>
